<script src="./layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'layer'], function () {
        const element = layui.element;
        const layer = layui.layer;
        const $ = layui.jquery;

        //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
        const layId = location.hash.replace(/^#main-navbar=/, '');
        element.tabChange('main-navbar', layId); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

        //监听Tab切换，以改变地址hash值
        element.on('tab(main-navbar)', function () {
            location.hash = 'main-navbar=' + this.getAttribute('lay-id');
        });

        let active = {
            // 添加
            tabAdd: function (url, id, name) {
                element.tabAdd('main-navbar', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="no" frameborder="0" src="' + url + '" style="width:100%;"></iframe>',
                    id: id
                })

                element.render('tab')
            },

            // 切换
            tabChange: function (id) {
                element.tabChange('main-navbar', id)
            },

            // 删除
            tabDelete: function (id) {
                element.tabDelete('main-navbar', id)
            },

            // 删除所有
            tabDeleteAll: function (ids) {
                $.each(ids, function (i, item) {
                    element.tabDelete('main-navbar', item)
                })
            },
        }

        $('.site-menu-active').on('click', function () {
            let dataId = $(this)
            //  这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($('.layui-tab-title li[lay-id]').length <= 0) {
                //  如果比零小，则直接打开新的tab项
                active.tabAdd(dataId.attr('data-url'), dataId.attr('data-id'), dataId.attr('data-title'))
            } else {
                //  否则判断该tab项是否以及存在
                let isData = false
                $.each($('.layui-tab-title li[lay-id]'),function () {
                    if ($(this).attr('lay-id') === dataId.attr('data-id')) {
                        isData = true
                    }
                })

                if (isData === false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(dataId.attr("data-url"), dataId.attr("data-id"),dataId.attr("data-title"));
                }
            }

            active.tabChange(dataId.attr('data-id'))
        })

    });
</script>